<template>
  <div class="footer">
    <footer :class="{'initial-input':footerClass,'jujiao':jujiaoClass}">
      <div class="yk-cover" @click="ykCover" v-if="$store.state.isYk"></div>
      <form  @submit.prevent action="#" v-show="$store.state.clearDom[0].open">
        <textarea id="textarea" :class="{'initial':textareaClass,'jujiao-input':jujiaoInput}" type="text" v-model="inputValue" @focus="inputFocus" @blur='inputBlur'  @keyup.13="sendMsg" :placeholder="inputPlaceholder"></textarea>
      </form>
      <div class="bottom-right" v-show="isBottomRight">
        <!-- <div v-show="$store.state.clearDom[0].open" class="message-btn" @click="clickFooterBtn('clickMessageBtn')">
          <img src="../../../../assets/images/lookBack/more.png" />
          <div class="message-num">{{totalNum}}</div>
        </div> -->
        <div v-if="shoppingBtnShow && $store.state.clearDom[0].open"  class="shopping-box" @click="clickFooterBtn('clickShoppingBtn')">
        </div>
        <div  v-if="showShouCang && $store.state.clearDom[0].open" class="collect-box" @click="clickCollect">
            <!--<img src="../../../../assets/images/back-collect-gray.png"/>-->
          <div class="collect-img-box" :class="[collectImgBoxClass]"></div>
        </div>
        <div v-show="$store.state.clearDom[0].open" class="zan-box" ref="dianZan"  @click="sendZan">
          <ClickLike :roomInfo="videoInfo" ref="clickLike" ></ClickLike>
            <!-- <div class="zan-num">{{hdCount}}</div> -->
        </div>
      </div>
      <span v-if="!isBottomRight" class="send-btn" :class="[sendClass]" @click="sendMsg">发送</span>
    </footer>
    <!-- <div class="send-box" v-show="isInputShow">
      <form @submit.prevent action="#">
        <textarea id="textarea"  class="inner-input" type="text" @focus="focusTextarea"  @blur='inputBlur' @keyup.13="sendMsg"
          :placeholder="inputPlaceholder" v-model="inputValue"></textarea>
      </form>
      <span  :class="[sendClass]" @click="sendMsg">发送</span>
    </div> -->
  </div>
</template>

<script>
  import ClickLike from '@/components/ClickLike/ClickLike';
  import { collectOrLike, cancelCollectOrLike, getFollowState } from '@/util/api.js'
  export default {
    components:{
      ClickLike
    },
    props: {
      hdCount: String, //点赞数  = 点赞数+留言数
      //totalNum: String, //留言数
      videoInfo: Object,
      quickMessage: String,
      shoppingDataInfo:Object,
    },
    data() {
      return {
        zanBoxImg:'', //点赞效果
        timer:null,//防抖定时器
        textareaClass:true,
        footerClass:true,
        jujiaoClass:false,
        jujiaoInput:false,
        isBottomRight: true,
        footerPlaceholder: "说点什么吧...",
        videoId: this.$route.params.id,
        inputValue: '', //输入框输入内容
        isInputShow: false,
        zanImgBoxClass: 'zan-white-class', //点赞class
        collectImgBoxClass: 'collect-gray-class', //收藏class
        inputPlaceholder: '',
        iconDataArray: [
          require('../../../../assets/images/zan/zan1.png'),
          require('../../../../assets/images/zan/zan2.png'),
          require('../../../../assets/images/zan/zan3.png'),
          require('../../../../assets/images/zan/zan4.png'),
          require('../../../../assets/images/zan/zan5.png'),
          require('../../../../assets/images/zan/zan6.png'),
          require('../../../../assets/images/zan/zan7.png'),
          require('../../../../assets/images/zan/zan8.png'),
          require('../../../../assets/images/zan/zan9.png'),
          require('../../../../assets/images/zan/zan10.png'),
          require('../../../../assets/images/zan/zan11.gif'),
          require('../../../../assets/images/zan/zan12.gif'),
        ],
        timerId: null,
        showShouCang: true, //是否展示收藏按钮
      }
    },
    computed: {
    shoppingBtnShow (){
        if(this.shoppingDataInfo ?.goods ?.goodsList.length ){
            return true
        }     
      }
    },
    async created() {
      //是否展示收藏按钮
      if (this.$channel == 'gszq') {
        this.showShouCang = false
      } else {
        this.showShouCang = true
      }
      // isPl  是否允许评论 0 否 1是     plCk 评论审核 0 先发 1 先审后发
      //console.log(this.videoInfo.videoInfo.plCk)
      if (this.videoInfo.hasOwnProperty('isLove') && this.videoInfo.isLove) { //有没有这个key
        this.zanImgBoxClass = 'zan-red-class';
      } else {
        this.zanImgBoxClass = 'zan-white-class';
      }
      const liveStation = this.$route.query.liveStation === '1'; // 是否来自直播小站
      if (liveStation) { // 查询是否收藏
        try {
          const res = await getFollowState(this.videoId, 3);
          this.collectImgBoxClass = res.data.data ? 'collect-red-class' : 'collect-gray-class';
        } catch (error) {
          throw new Error(error);
        }
      } else {
        if (this.videoInfo.hasOwnProperty('querySc') && this.videoInfo.querySc) { //有没有这个key
          this.collectImgBoxClass = 'collect-red-class'
        } else {
          this.collectImgBoxClass = 'collect-gray-class'
        }
      }
      //评论开关
      if (this.videoInfo.videoInfo.isPl == '0') { //禁止评论
        this.inputPlaceholder = '评论功能已关闭'
      } else if (this.videoInfo.videoInfo.isPl == '1') { //可以评论
        this.inputPlaceholder = '说点什么...'
      }
    },
    mounted() {
      fun.objBlurFun('textarea'); //ios下键盘弹出点击空白不收起问题
    },
    methods: {
      sendZan(e) {
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `回看详情页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status: '回看',
          live_room_creator: creator,
          function_name: '点赞',
        });
				if (e.target.classList.contains("icon-wrap")) return false;
				// 触发动画
				this.$refs.clickLike.triggerAni();
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				} else {
					this.clickLikeFun();
				}
    	},
      // sendZanFun() {
			// // 触发点赞接口
			// 	this.$refs.clickLike.triggerNum();
			// 	},
				ykCover() {
				if (this.isPublic) {
					this.$emit('formChildMsg', {
					type: 'isPublicShow',
					data: {
						'Msg': '公开不限制直播间'
					}
					})
					return
				}
				if (this.$store.state.isYk) {
					let jointUrl = fun.getCurPageUrl('live', this.$route.params.roomid);
					fun.ykDisposeFun(jointUrl)
					return
				}
			},
      debounce(){ //防抖动画执行
          let _this = this
          return function() {
              if(_this.timer){
                  clearTimeout(_this.timer);
                  _this.timer = setTimeout(()=>{
                    _this.$addStorageEvent(2,'hunayuan',0); //判断动画是否改变
                  },2000);
              }else{
                  _this.timer = setTimeout(()=>{
                    _this.$addStorageEvent(2,'hunayuan',0); //判断动画是否改变
                  },2000);
              }
          }()
      },
      ykCover() {
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
          fun.ykDisposeFun(jointUrl)
          return
        }
      },
      clickCollectFun() {
        const liveStation = this.$route.query.liveStation === '1';
        if (this.collectImgBoxClass == "collect-gray-class") { //收藏
          liveStation ? this.collectLiveStation(1) : this.collectFun(1);
        } else if (this.collectImgBoxClass == "collect-red-class") { //取消收藏
          liveStation ? this.collectLiveStation(0) : this.collectFun(0);
        }
      },
      clickCollect() { //点击收藏
				// 神策打点（收藏 1 取消收藏 0）
				const { title, creator } = this.videoInfo.videoInfo;
				$sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
					page_name: `回看详情页`,
					user_nickname: this.$store.state.userInfo.nickname,
					live_room_id: this.$route.params.id,
					live_room_name: title,
					live_room_status: '回看',
					live_room_creator: creator,
					function_name: ['取消收藏', '收藏'][this.collectImgBoxClass == "collect-gray-class" ? 1 : 0],
				});
        if (this.$store.state.isYk) {
          let jointUrl = fun.getCurPageUrl('back', this.$route.params.id)
          fun.ykDisposeFun(jointUrl)
          return
        }
        this.clickCollectFun();
      },
      collectFun(num) { //0  取消收藏   1收藏
        this.$http.post("/h5live/scVideo?vid=" + this.videoId + "&status=" + num).then(
          res => {
            if (res.data.code == "000000" && num == "1") {
              this.collectImgBoxClass = 'collect-red-class'
              fun.toastMessage('已收藏')
            } else if (res.data.code == "000000" && num == "0") {
              this.collectImgBoxClass = 'collect-gray-class'
            } else if (res.data.code == "100002" || res.data.code == "100003") {
              fun.toastMessage("你操作太频繁了", 1000)
            } else {
              console.log("收藏接口错误")
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      async collectLiveStation(num){
        if(num === 1){ // 收藏
          try {
            const res = await collectOrLike(this.videoId, 3, this.$channel)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              fun.toastMessage('已收藏')
              this.collectImgBoxClass = 'collect-red-class'
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        } else if (num === 0) { // 取消收藏
          try {
            const res = await cancelCollectOrLike(this.videoId, 3, this.$channel)
            const { code, data, msg } = res.data;
            if (code === '000000') {
              this.collectImgBoxClass = 'collect-gray-class'
            } else {
              fun.toastMessage(msg);
            }
          } catch (error) {
            throw new Error(error);
          }
        }
      },
      clickLikeFun() {
        this.$refs.clickLike.triggerNum();
        // let boomChildList = [];  
        // for (let i = 0; i < this.iconDataArray.length; i++) {  
        //   let temDom = document.createElement('div');  
        //   temDom.className = 'demoDom';  
        //   temDom.innerHTML = `<img src="${this.iconDataArray[i]}">`;  
        //   // oBox.appendChild(temDom);  
        //   boomChildList.push(temDom);  
        // }  
        // let boom = new Boom({  
        //   particleList: boomChildList,  
        //   container: this.$refs.dianZan  
        // });  
        // // boom.boom();  
        // if (this.zanImgBoxClass == 'zan-red-class') {  
        //   // fun.toastMessage("你已经点过赞啦~~~", 1000);  
        //   return;  
        // }  
        // this.$http.post("/h5live/hit?vid=" + this.videoId + "&plat=" + fun.getPlatform()).then(  
        //   res => {  
        //     if (res.data.code == "000000") {  
        //       this.zanImgBoxClass = 'zan-red-class';  
        //     }  
        //   },  
        //   err => {  
        //     console.log(err);  
        //   }  
        // ).then(() => {  
        //   this.$refs.clickLike.triggerNum();  
        // });
      },
      clickLike() { //点赞
        // 神策打点（点赞）
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `回看详情页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status: '回看',
          live_room_creator: creator,
          function_name: '点赞',
        });
        let _this = this;
        _this.zanBoxImg = 'zanBoxImg'; //每次点击给点赞按钮添加一个q弹的效果
        setTimeout(()=>{
          _this.zanBoxImg = ''; //在0.5秒后再把q弹效果给取消了
        },500)
        this.$addStorageEvent(2,'speed',0); //点击点赞图片时使canvas动画加快
        this.$addStorageEvent(2,'hunayuan',true); //判断动画是否改变
        _this.debounce();
          this.clickLikeFun();
      },
      clickFooterBtn(type) {
        this.shopClick()//点击小黄车埋点
        if (type == 'clickMessageBtn') {
          if (this.$channel === config.MSYH && window.terminal.weixin && window.isUc != '1') {
            fun.msySkipSinePage('back', this.$route.params.id, this.videoInfo.source) //调用微信 民生银行通行证
            return
          } else {
            this.$emit('formChildMsg', {
              type: type
            })
          }
        } else {
          this.$emit('formChildMsg', {
            type: type
          })
        }
      },
      inputBlur() { //失去焦点
          setTimeout(()=>{
            this.isBottomRight = true;
             this.textareaClass = true;
             this.footerClass = true;
             this.jujiaoClass = false;
             this.jujiaoInput = false;
          }, 100)
      },
      focusTextarea(){
        this.insertInputTxt(this.inputValue.length)
      },
      inputFocus() { //获取焦点
        setTimeout(()=>{
          this.isBottomRight = false;
          this.textareaClass = false;
          this.jujiaoClass = true;
          this.jujiaoInput = true;
          this.footerClass = false;
        }, 100)
      },
      sendMsgFun() {
        if (this.inputValue.length > 150) {
          fun.toastMessage("留言字数过多，请重新编辑", 2000)
          return
        }
        if (this.videoInfo.videoInfo.isPl == '0') {
          fun.toastMessage("评论功能已关闭", 2000)
          this.inputValue = "";
          return
        }
        //发送留言
        if (this.inputValue != "") {
          this.$http.post("/h5live/addComment?vid=" + this.videoId + "&content=" + this.inputValue + "&plat=" + fun.getPlatform()).then(
            res => {
              if (res.data.code == "000000") { //留言提交成功
                if (this.videoInfo.videoInfo.plCk == '1') { //需要审核
                  fun.toastMessage("已提交，等待审核", 2000)
                }else{
                  this.$EventBus.$emit("sendMsgPsBack",this.inputValue);
                }
                this.inputValue = "";
                this.$parent.quickMessage = "";
              } else {
                fun.toastMessage(res.data.msg, 3000)
              }
            },
            err => {
              console.log(err);
            }
          );
        }
      },
      // 直播提交留言
      sendMsg() {
        // 神策打点（发言）
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `回看详情页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status: '回看',
          live_room_creator: creator,
          function_name: '发送留言',
          reply_content: this.inputValue
        });
        if (this.$store.state.isYk) {
          fun.ykDisposeFun();
          return
        }       
        this.sendMsgFun();
        this.inputBlur();
      },
      insertInputTxt(length) {
        // 改变光标位置
        let input = document.getElementById("textarea")
        input.focus();
        input.selectionStart = length;
        input.selectionEnd = length;
      },
      // 点击小黄车打点
      shopClick() {
        const { title, creator } = this.videoInfo.videoInfo;
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick', {
          page_name: `直播回看页`,
          user_nickname: this.$store.state.userInfo.nickname,
          live_room_id: this.$route.params.id,
          live_room_name: title,
          live_room_status:"回看",
          live_room_creator: creator,
          function_name: '点击小黄车',
      });
      }
    },
     watch:{
       // 监听值快捷消息
       quickMessage(){
         this.inputValue = this.quickMessage;
         if(this.inputValue !== ""){
          //this.inputFocus()
          let textarea = document.getElementById("textarea");
            setTimeout(()=>{
                textarea.focus()
            }, 100)
          }                  
       },
      //监听底部按钮颜色变化
      inputValue() {
        if (!this.inputValue) {
          this.sendClass = ''
        } else {
          this.sendClass = 'send-red'
        }
      },
    },
  }
</script>

<style scoped="scoped">
.footer{
  position: relative;
  z-index: 9;
}
  footer {
    width: 100%;
    height: 64px;
    position: absolute;
    bottom: 40px;
    left: 0;
   /* background: sandybrown; */
    z-index: 10;
    display: flex;
    /* justify-content: center;*/
    align-items: center;
    justify-content: flex-end;
  }

  .yk-cover {
    width: 100%;
    height: 64px;
    background: transparent;
    /* background: saddlebrown;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
  }

  .shopping-box {
    width: 64px;
    height: 64px;
    background: url('../../../../assets/images/lookBack/goods-icon.png') no-repeat;
    background-size: 100% 100%;
    color: white;
  }
  footer form {
    width: 300px;
    height: 64px;
    flex: 1;
    /*	 background: pink;*/
    display: flex;
  }

  .initial {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.39);
    border-radius: 40px;
    flex: 1;
    font-size: 26px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    padding-left: 30px;
	padding-top:12px ;
    margin: 0 20px;
    line-height: 40px;
  }
  .jujiao {
  	width: 100%;
  	height: 106px;
  	padding: 0 20px;
  	background: #FFFFFF;
  	position: fixed;
  	/* 不用fixed以防光标上移 */
  	bottom: 0;
  	left: 0;
  	z-index: 10;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  }
  .initial-input {
  	width: 100%;
  	height: 64px;
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
  }
  .jujiao-input {
    width: 100%;
    height: 64px;
    background: #F2F2F2;
    border-radius: 23px 0 0 23px;
    font-size: 28px;
    font-weight: 400;
    color: #3A3A3A;
    padding-left: 30px;
    padding-top: 15px;
    word-wrap: break-word;
    word-break: normal;
    line-height: 40px;
  }

  .jujiao-input::placeholder {
    color: #3A3A3A;
  }

  .message-btn {
    width: 64px;
    height: 64px;
    margin: 0 7.5px;
    position: relative;
    z-index: 16;
  }

  .collect-box {
    width: 64px;
    height: 64px;
    margin: 0 7.5px;
  }

  .collect-img-box {
    width: 64px;
    height: 64px;
  }

  .collect-gray-class {
    background: url('../../../../assets/images/lookBack/shoucang1.png') no-repeat;
    background-size: 64px 64px;
  }

  .collect-red-class {
    background: url('../../../../assets/images/lookBack/hasShoucang1.png') no-repeat;
    background-size: 64px 64px;
  }

  .zan-box {
    width: 64px;
    height: 64px;
    margin: 0 10px 0 7.5px;
	  position: relative;
    user-select:none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  }

  .zan-white-class {
    /*2021/10/21 已点赞和点赞效果图一致 */
    background: url('../../../../assets/images/lookBack/zan.png') no-repeat;
    background-size: 64px 64px;
    user-select:none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  }

  .zan-red-class {
    background: url('../../../../assets/images/lookBack/zan.png') no-repeat;
    background-size: 64px 64px;
    user-select:none;
  	-webkit-user-select: none;
  	-moz-user-select: none;
  }

  .zan-box .zan-img-box {
    width: 64px;
    height: 64px;
    pointer-events: none;
  }

  .message-btn img {
    width: 64px;
    height: 64px;
  }

  .zan-num,
  .message-num {
    /*		width: 80px;*/
    max-width: 80px;
    height: 25px;
    line-height: 25px;
    background: #d73636;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    padding: 1px 8px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: -2px;
    transform: translate(-50%, -50%);
  }

  .initial::placeholder {
    color: white;
  }

  .zan-num {
    background: #EF8A1E;
  }

  .send-box {
    width: 100%;
    padding: 0 20px;
    height: 106px;
    background: #FFFFFF;
    position: absolute;  /* 不用fixed以防光标上移 */
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .send-box span {
    width: 130px;
    height: 64px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    background: #F2F2F2;
    line-height: 64px;
    text-align: center;
    border-radius: 0 23px 23px 0;
    border-left: 2px solid #E8E8E8;
  }
  .send-box .send-red{
    color:#cc3538;
  }
  .send-box form {
    width: calc(100vh - 130px);
    height: 64px;
  }
  .bottom-right {
  	display: flex;
  }
  .send-btn {
  	width: 130px;
  	height: 64px;
  	font-size: 28px;
  	font-weight: 400;
  	color: #333333;
  	background: #F2F2F2;
  	line-height: 64px;
  	text-align: center;
  	border-radius: 0 23px 23px 0;
  	border-left: 2px solid #E8E8E8;
  }

  /* 点赞效果q弹 */
  .zanBoxImg{
    animation: keyNavBottom 0.3s ease-in;
  }
   @keyframes keyNavBottom{
    	0%{
    		transform: scale(1);
    	}
    	25%{transform: scale(1.1);
     }
    	50%{transform: scale(0.9);
     }
     75%{transform: scale(1.1);
     }
    	100%{
    		transform: scale(1);
    	}
    }
</style>
